<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>Test Page</title>

     <style type="text/css">
        * { margin: 0; padding: 0;}
        a img {
            border: none;
        }
        #wrapper {
            width: 800px;
            margin: 20px auto;
        }
                
        ul.photos {
        	list-style: none;
        }
        ul.photos li {
        	float: left;
        	margin: 10px; padding: 0;
        	text-align: center;
        	border: 1px solid #a4a4a4;
        	display: inline; 
        }
        ul.photos li a.image {
        	width: 300px; 
        	height: 225px; 
        	cursor: pointer;
        }
        ul.photos li span { 
        	width: 300px;
        	height: 225px;
        	overflow: hidden;
        	display: block;
        }
        
        ul.photos li h2 {
        	font-size: 1em;
        	font-weight: normal;
        	margin: 0; padding: 10px;
        	background: #ececec;
        }
        ul.photos li a {text-decoration: none; color: #3a3a3a; display: block;}
             </style>

     <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

     <script type="text/javascript">
        $(document).ready(function() {
            $("ul.photos li").hover(function() { 

		var imageOver = $(this).find("img").attr("src"); //Get image url and assign it to 'imageOver'

		//Set a background image(imageOver) on the <a> tag - Set position to bottom
		$(this).find("a.image").css({'background' : 'url(' + imageOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

        });
     </script>
</head>

<body>
	<div id="wrapper">
        <ul class="photos">
        	<li>
        		<a href="#" class="image"><span><img src="images/image-1.jpg" alt="" /></span></a>
        		<h2><a href="#">Image Name</a></h2>
        	</li>
            
            <li>
        		<a href="#" class="image"><span><img src="images/image-2.jpg" alt="" /></span></a>
        		<h2><a href="#">Image Name</a></h2>
        	</li>
            
            <li>
        		<a href="#" class="image"><span><img src="images/image-3.jpg" alt="" /></span></a>
        		<h2><a href="#">Image Name</a></h2>
        	</li>
            
            <li>
        		<a href="#" class="image"><span><img src="images/image-4.jpg" alt="" /></span></a>
        		<h2><a href="#">Image Name</a></h2>
        	</li>
        </ul>
    
    </div><!--End #wrapper-->

</body>

</html>